<template>
    <BoxBorder13
        :colors="['#6586ec' ,'#2cf7fe']"
        class="bigDataCard"
    >
        <div
            class="bigDataCard-content"
            ref="warningInfoRef"
        >
            <div class="header">
                <div class="title">预警信息</div>
            </div>
            <div class="body">
                <el-timeline :style="{'max-height': timeLineHeight}">
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                    >
                        <div class="early-warning-list-items">
                            <div class="unitName">{{ activity.unitId }}</div>
                            <div class="generate">
                                <div class="type">重点对象预警</div>
                                <div class="timestamp">{{ activity.warningdate }}</div>
                            </div>
                            <div class="position">
                                <div class="address">{{ activity.place }}</div>
                                <div class="name">{{ activity.peopleName }}</div>
                            </div>
                        </div>
                    </el-timeline-item>
                </el-timeline>

            </div>
        </div>
    </BoxBorder13>
</template>

<script setup>
import {BoxBorder13} from "guodu-data-panel";
import {useTemplateRef} from "vue";
import {getEmergencyWarningList} from "@/api/FireAction/FireAlert.js";

const warningInfoRef = useTemplateRef('warningInfoRef')

const timeLineHeight = ref('10rem')

const activities = ref([])
let intervalId = null
onMounted(() => {
    timeLineHeight.value = `${warningInfoRef.value.offsetHeight / 16}rem`;
    getData()
    intervalId = setInterval(getData, 2 * 60 * 1000)
})

onUnmounted(() => {
    if (intervalId) {
        clearInterval(intervalId)
    }
})

const getData = async () => {
    const res = await getEmergencyWarningList({}, {
        pageNum: 1,
        pageSize: 10
    });
    activities.value = res.rows;
}
</script>

<style scoped lang="scss">
:deep(.el-timeline) {
    --el-border-color-light: var(--data-text-color);
    position: relative;
    overflow-x: auto;
    height: 100%;
    padding: 0 0 0 5px;

    &::-webkit-scrollbar {
        width: 0;
    }
}

:deep(.el-timeline-item__content) {
    color: var(--el-border-color-light);
}

.bigDataCard-content {
    width: 100%;
    height: 100%;
}

.early-warning-list-items {
    .generate {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 5px 0;
    }

    .position {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>